<template>
  <section class="echartBox-wrapper">
      <div class="echart-box" :ref="id"></div>
  </section>
</template>
<script>
import echarts from "../echarts/index";
export default {
  props: ["id", "title", "echartsData"],
  data() {
    return {};
  },
  mounted() {},
  watch: {
    echartsData: {
      handler(newVal) {
        if (newVal) {
          // debugger
          this.initData(this.echartsData.seriesData);
          this.$nextTick(() => {
            this.renderEchart();
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    initData(seriesData) {
      if (seriesData) {
        return seriesData.map((item) => {
          // const len = item.data.length;
          const obj = {
            name: item.name,
            // data: item.data,
            data: item.data
              .map((i) => {
                return i;
              })
              .reverse(), //让数据量大的在上面
            type: "bar",
            barWidth: 12,
            // itemStyle: {
            //   normal: {
            //     color:function(params) {
            //       return params.dataIndex==(len-1)
            //       ?colors[2]
            //       :(params.dataIndex==(len-2)||params.dataIndex==(len-3))
            //       ?colors[1]
            //       :colors[0]
            //     }
            //   }
            // },
          };
          if (item.stack) {
            obj.stack = item.stack;
          }
          if (item.label) {
            obj.label = { show: true, color: item.label };
          }
          return obj;
        });
      }
    },
    renderEchart() {
      //2.初始化
      const myChart = echarts.init(this.$refs[this.id]);
      //3.配置数据
      let option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(25,62,119,0.4)",
          borderColor: "#4372B9",
          textStyle: {
            color: "#fff",
          },
          axisPointer: {
            type: "shadow",
          },
          formatter: (params) => {
            let res = "",
              axisValueLabel = "";
            params.forEach((item) => {
              axisValueLabel = item.axisValue;
              res += `<li>
               ${item.marker} ${item.seriesName} ${item.value}
              </li>`;
            });
            return `<div>${axisValueLabel}</div>
              <ul>${res}</ul>`;
          },
        },
        legend: {
          show: this.echartsData.legend,
          data:
            this.echartsData.seriesData &&
            this.echartsData.seriesData.map((item) => item.name),
          right: 10,
          top: 0,
          itemWidth: 10,
          itemHeight: 4,
          itemGap: 4,
          textStyle: {
            color: "#fff",
            fontSize: 10,
          },
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "3%",
          top: this.echartsData.legend ? "8%" : 0,
          containLabel: true,
        },
        color: this.echartsData.color || "#2EBB80",
        // color: this.echartsData.color || (),
        xAxis: {
          type: "value",
          // boundaryGap: [0, 0.01],
          axisLine: {
            show: true,
            lineStyle: {
              color: "#4F73A5",
              type: "solid",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true, //想要不显示网格线，改为false
            lineStyle: {
              color: ["#20355D"],
            },
          },
        },
        yAxis: {
          type: "category",
          data: this.echartsData.axisData,
          axisLine: {
            lineStyle: {
              color: "#4F73A5",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: this.initData(this.echartsData.seriesData),
        // series: [
        //   {
        //     // name: "2011年",
        //     type: "bar",
        //     data: [1.2, 1.4, 1.6, 1.8, 2, 2.4, 2.6, 2.8, 3.2, 3.4],
        //     itemStyle: {
        //       color: ["#28A376"],
        //     },
        //   },
        // ],
      };
      // 4.传入数据
      myChart.setOption(option);
      // 自动调节echarts的大小
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      // 销毁调节echarts的大小
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", () => {
          myChart.resize();
        });
      });
    },
  },
};
</script>
<style lang="scss">
$marginTop: 10px;
$titleMargin: 6px;
.echartBox-wrapper {
  width: 100%;
  height: calc(100% - #{$marginTop});
  // overflow: hidden;
  // .title-box {
  //   height: $titleHeight;
  //   line-height: $titleHeight;
  //   margin: $titleMargin 0;
  //   font-size: 16px;
  //   font-weight: bold;
  //   color: #4193e3;
  // }
  // .ant-spin-container {
  //   height: 100%;
  //   .echart-box {
  //     height: calc(100% - #{$titleHeight} - 2 * #{$titleMargin});
  //     width: 100%;
  //   }
  // }
  .echart-box {
    margin-top: $marginTop;
    height: 100%;
    width: 100%;
  }
}
</style>
